<template>
  <div>
    <div class="box1">
      <div class="title">新 年 倒 计 时</div>
      <div class="app">
        <strong
          ><span>{{ day }}天</span></strong
        >
        <strong>
          <span>{{ hour }}时</span></strong
        >
        <strong
          ><span>{{ minute }}分</span></strong
        >
        <strong
          ><span>{{ second }}秒</span></strong
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ggg: 'hello word',
      day: '',
      hour: '',
      minute: '',
      second: '',
      allTime: ''
    }
  },
  methods: {
    timer(time) {
      var date = new Date()
      let remainDate = (time - 0 - date.getTime()) / 1000
      console.log(remainDate)

      let day = Math.floor(remainDate / 60 / 60 / 24) + ''

      this.day = day.length < 2 ? '0' + day : day
      let hour = Math.floor((remainDate / 60 / 60) % 24) + ''
      console.log(hour.length)

      this.hour = hour.length < 2 ? '0' + hour : hour
      let minute = Math.floor((remainDate / 60) % 60) + ''
      this.minute = minute.length < 2 ? '0' + minute : minute
      let second = Math.floor(remainDate % 60) + ''
      this.second = second.length < 2 ? '0' + second : second
      return day - 0 + hour - 0 + minute - 0 + second - 0
    },
    tiaoYong() {
      let endTime
      let setTime = setInterval(() => {
        endTime = this.timer(this.allTime)
        if (!endTime) {
          clearInterval(setTime)
          this.$router.push('/home')
        }
      }, 1000)
    }
  },
  created() {
    this.allTime = +new Date('2020-1-1 00:00:00')
    this.timer(this.allTime)
    this.tiaoYong()
  }
}
</script>
<style lang="less" scoped>
.box1 {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.app {
  display: flex;
  border: 0.1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

.box1 .title {
  margin: 0 0 7px 7px;
  text-shadow: 0 0 2px black;
  color: #fffaf0;
  font-size: 40px;
}

.app span {
  width: 65px;
  height: 100px;
  color: aliceblue;
  background: #2e2e2e;
  font-size: 30px;
  display: flex;
  align-items: center;
  text-align: center;
}
</style>
